<template>
  <scroll-view :scroll-y="true" class="h-11/12 m-auto w-11/12">
    <uni-forms :modelValue="formData">
      <!-- 工作区 -->
      <uni-card title="工作区" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox
            v-model="formData.gongZuoQu"
            :localdata="gongZuoQu"
            :disabled="isEdit"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 时间 -->
      <uni-card title="时间" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox
            :disabled="isEdit"
            v-model="formData.shiJian"
            :localdata="shiJian"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 消毒液实际浓度 -->
      <uni-card title="消毒液实际浓度" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox
            v-model="formData.xiaoDuYeShiJiNongDu"
            :localdata="xiaoDuYeShiJiNongDu"
            :disabled="isEdit"
          />
        </uni-forms-item>
        <!-- 消毒液实际浓度图片 -->
        <uni-forms-item>
          <uni-file-picker
            file-mediatype="image"
            v-model="formData.xiaoDuYeShiJiNongDuImg"
            mode="grid"
            @select="upload"
            :disabled="isEdit"
          ></uni-file-picker>
        </uni-forms-item>
      </uni-card>
      <!-- 整改行动 -->
      <uni-card title="整改行动">
        <uni-forms-item>
          <uni-easyinput
            v-model="formData.zhengGaiXingDong"
            :disabled="isEdit"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 检查人姓名 -->
      <uni-card title="检查人姓名" extra="必填*">
        <uni-forms-item>
          <uni-easyinput
            v-model="formData.jianChaRenXingMing"
            :disabled="isEdit"
          />
        </uni-forms-item>
      </uni-card>
      <uni-card title="评语" v-show="props.id">
        <uni-easyinput v-model="reviewOpinion" />
      </uni-card>
    </uni-forms>
    <button
      @click="submitForm"
      class="mb-10 w-2/3 rounded-xl"
      style="background-color: #5199ff"
    >
      {{ submitBtnName }}
    </button>
    <ShowConfigComponent
      name="guoShuXiaoDu"
      @showFormData="showFormData"
      v-show="!isEdit"
    />
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { createTableById, showTableById, submitTable } from '@/services/write';
import {
  convertToString,
  splitName,
  stringifyNumbers,
  transformData,
  compareLoadData,
} from '@/utils/utils';
import type {
  FormDetail,
  returnSubmitData,
  submitTableData,
  tableDate,
} from '@/services/types/write';
import { uploadImg } from '@/utils/http';
import type { RequestMenuIdList } from '@/services/types/review';
import { submitMenuIdList } from '@/services/review';
// 表格提交信息
const formData = ref({
  gongZuoQu: '', //工作区
  shiJian: '', //时间
  xiaoDuYeShiJiNongDu: '', // 消毒液实际浓度
  xiaoDuYeShiJiNongDuImg: [] as {
    url: string;
    extname: string;
    name: string;
  }[], // 消毒液实际浓度图片
  zhengGaiXingDong: '', // 整改行动
  jianChaRenXingMing: '', // 检查人姓名
});
const props = defineProps({
  value: String,
  id: String,
});
// 评语
const reviewOpinion = ref('');
// 是否可编辑
const isEdit = ref(false);
// 提交按钮名字
const submitBtnName = ref('');
// 工作区
const gongZuoQu = [
  {
    text: '水果&蔬菜清洗间',
    value: '水果&蔬菜清洗间',
  },
  {
    text: '专间',
    value: '专间',
  },
];
// 时间
const shiJian = [
  {
    text: '上午',
    value: '上午',
  },
  {
    text: '下午',
    value: '下午',
  },
];
//消毒液实际浓度
const xiaoDuYeShiJiNongDu = [
  {
    text: '＜100 ppm',
    value: '＜100 ppm',
  },
  {
    text: '100-200 ppm',
    value: '100-200 ppm',
  },
  {
    text: '＞200 ppm',
    value: '＞200 ppm',
  },
];

// 上传图片
const upload = (e: UniHelper.PickerInstance) => {
  uploadImg(e).then((res) => {
    formData.value.xiaoDuYeShiJiNongDuImg.push({
      url: res.url,
      extname: 'jpg',
      name: res.key,
    });
  });
};

onLoad(async () => {
  // 判断提交按钮是否等于newTable，
  // 等于newTable则执行创建表格
  if (props.value === 'newTable') {
    createTable();
  } else if (props.id) {
    showDataById(props.id);
    submitBtnName.value = '审批';
    isEdit.value = true;
  }
});
/**
 * 表格相关数据
 */
const table = () => {
  const tableData = ref<tableDate[]>([]);
  const reportingFormOperateId = ref('');
  // 如果提交按钮等于提交则创建表格
  const createTable = async () => {
    submitBtnName.value = '提交';
    // 创建表格
    uni.showLoading({
      title: '加载中...',
      mask: true,
    });
    const res = await createTableById('8286266087871676416');
    reportingFormOperateId.value = res.reportingFormOperateId;
    tableData.value = stringifyNumbers(res.data) as tableDate[];
    uni.hideLoading();
  };
  // 提交表格
  const submitNewTable = (
    reportingFormOperateId: string,
    tableData: tableDate[],
  ): submitTableData => {
    const formDetail = transformData(tableData) as FormDetail[];
    //工作区
    formDetail[0].componentValue = formData.value.gongZuoQu;
    formDetail[0].options.filter((item) => {
      if (splitName(item.optionTitle) === formData.value.gongZuoQu) {
        item.selected = true;
      }
    });
    // 时间
    formDetail[1].componentValue = formData.value.shiJian;
    formDetail[1].options.filter((item) => {
      if (splitName(item.optionTitle) === formData.value.shiJian) {
        item.selected = true;
      }
    });
    //消毒液实际浓度
    formDetail[2].componentValue = formData.value.xiaoDuYeShiJiNongDu;
    formDetail[2].options.filter((item) => {
      if (splitName(item.optionTitle) === formData.value.xiaoDuYeShiJiNongDu) {
        item.selected = true;
      }
    });
    // 消毒液实际浓度图片
    if (formData.value.xiaoDuYeShiJiNongDuImg.length) {
      formDetail[3].componentValue = convertToString(
        formData.value.xiaoDuYeShiJiNongDuImg as {
          url: string;
          extname: string;
          name: string;
        }[],
      );
    }

    // 整改行动
    formDetail[4].componentValue = formData.value.zhengGaiXingDong;
    //检查人姓名
    formDetail[5].componentValue = formData.value.jianChaRenXingMing;
    const submitTableData = ref<submitTableData>({
      formDetail: formDetail,
      reportingFormOperateId: reportingFormOperateId,
      status: 1,
      unionMenuId: '8286266087871676416',
    });

    return submitTableData.value;
  };
  return {
    createTable,
    tableData,
    reportingFormOperateId,
    submitNewTable,
  };
};
const { createTable, submitNewTable, tableData, reportingFormOperateId } =
  table();
// 根据id展示数据
const showDataById = async (id: string) => {
  uni.showLoading({
    title: '加载中...',
    mask: true,
  });
  const res = await showTableById(id);
  if (res.msg === 'success') {
    //使用地点
    res.data.formDetail[0].options.filter((item) => {
      if (item.selected) {
        formData.value.gongZuoQu = splitName(item.optionTitle);
      }
    });
    // 时间
    res.data.formDetail[1].options.filter((item) => {
      if (item.selected) {
        formData.value.shiJian = splitName(item.optionTitle);
      }
    });
    //消毒液实际浓度
    res.data.formDetail[2].options.filter((item) => {
      if (item.selected) {
        formData.value.xiaoDuYeShiJiNongDu = splitName(item.optionTitle);
      }
    });
    // 消毒液实际浓度图片
    if (res.data.formDetail[3].tfiles) {
      formData.value.xiaoDuYeShiJiNongDuImg = [];
      res.data.formDetail[3].tfiles.map((item) => {
        formData.value.xiaoDuYeShiJiNongDuImg.push({
          url: item.fileUrl,
          extname: 'jpg',
          name: item.name,
        });
      });
    }

    // 整改行动
    formData.value.zhengGaiXingDong = res.data.formDetail[4].componentValue;
    //检查人姓名
    formData.value.jianChaRenXingMing = res.data.formDetail[5].componentValue;
    // 评语
    reviewOpinion.value = (
      res.data as returnSubmitData
    ).handleOption.reviewOpinion;
  }
  uni.hideLoading();
};
// 提交
const submitForm = () => {
  // 等于newTable则执行提交表格
  if (props.value === 'newTable') {
    submitTable(
      submitNewTable(reportingFormOperateId.value, tableData.value),
    ).then((res) => {
      if (res.msg === 'success') {
        uni.showToast({
          title: '提交成功',
          icon: 'success',
          duration: 500,
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
        }, 500);
      }
    });
  } else if (props.id) {
    // 有id意味查看详情
    const data = ref<RequestMenuIdList>({
      id: props.id,
    });
    submitMenuIdList(data.value, reviewOpinion.value).then((res) => {
      if (res.data === 'success') {
        uni.showToast({
          title: '提交成功',
          icon: 'success',
          duration: 500,
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
        }, 500);
      }
    });
  }
};
// 加载配置
const showFormData = (data: any) => {
  compareLoadData(formData.value, data);
};
</script>

<style lang="scss" scoped>
::v-deep.uni-card {
  .uni-card__header {
    .uni-card__header-extra {
      .uni-card__header-extra-text {
        color: #ff0000;
      }
    }
  }
}
</style>
